<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	
	<title>幻灯片，一个jQuery幻灯片插件</title>
	
<style type="text/css" media="screen">
.slides_container{width:470px;display:none;}
.slides_container div.slide{width:470px;height:170px;display:block;}
.item{float:left;width:135px;height:135px;margin:0 10px;background:#efefef;}
.pagination{list-style:none;margin:0;padding:0;}
.pagination .current a{color:red;}
</style>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	
	<script type="text/javascript">
		$(function(){
			$('#slides').slides({
				preload: true,
				generateNextPrev: true
			});
		});
	</script>
</head>
<body>
	<div id="slides">
		<div class="slides_container">
			
			<div class="slide">
				<div class="item">
					Item One
				</div>
				<div class="item">
					Item Two
				</div>
				<div class="item">
					Item Three
				</div>
			</div>
			
			<div class="slide">
				<div class="item">
					Item Four
				</div>
				<div class="item">
					Item Five
				</div>
				<div class="item">
					Item Six
				</div>
			</div>
			
			<div class="slide">
				<div class="item">
					Item Seven
				</div>
				<div class="item">
					Item Eight
				</div>
			</div>
			
		</div>
	</div>
</body>
</html>
